<template>
<div class="nav">
  <figure>
    <img src="../assets/01.png">
    <figcaption>嗨购超市</figcaption>
  </figure>
  <figure>
    <img src="../assets/02.png">
    <figcaption>数码电器</figcaption>
  </figure>
  <figure>
    <img src="../assets/03.png">
    <figcaption>嗨购服饰</figcaption>
  </figure>
  <figure>
    <img src="../assets/04.png">
    <figcaption>嗨购生鲜</figcaption>
  </figure>
  <figure>
    <img src="../assets/05.png">
    <figcaption>嗨购到家</figcaption>
  </figure>
  <figure>
    <img src="../assets/06.png">
    <figcaption>充值缴费</figcaption>
  </figure>
  <figure>
    <img src="../assets/07.png">
    <figcaption>9.9元拼</figcaption>
  </figure>
  <figure>
    <img src="../assets/08.png">
    <figcaption>领券</figcaption>
  </figure>
  <figure>
    <img src="../assets/09.png">
    <figcaption>领金贴</figcaption>
  </figure>
  <figure>
    <img src="../assets/10.png">
    <figcaption>plus会员</figcaption>
  </figure>
</div>
</template>

<script>
export default {
  name:"NavBar"
}
</script>

<style scoped>
.nav{
  height: 12rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  /* flex-shrink: 0; */
  justify-content: space-around;
  box-sizing: border-box;
  text-align: center;
}
figure{
  margin-top: .5rem;
  width:18%;
}
img{
  width: 80%;
}
</style>